Qué es un acordeón
Es un elemento sobre el que el usuario puede hacer clic, abriendo
una ventana que contiene información que suele estar colapsada por
defecto.
Cómo crear un acordeón usando sólo HTML
Con la etiqueta < details > podremos crear un
elemento desplegable. Es una etiqueta contenedora que funciona como
un < div > pero no se muestra inicialmente todo el
contenido.
Tambien se puede incluir una etiqueta < summary > para personalizar el texto del desplegable.
Ejemplo:
< section>
< details>
< summary>sección 1< /summary>
< div>Contenido de la sección< /div>
< /details>
< /section>
Como abrir sólo uno a la vez
Para crear un grupo de acordeón donde se despliegue sólo
uno a la vez podemos agregar el atributo name con el
mismo nombre a todos los acordeones.
Ejemplo:
< details name="accordion">